import React, { PureComponent } from "react";
import { Flex ,Toast} from "antd-mobile";
import s from "./index.scss";
import invest11 from "assets/images/invest11.png";
import invest12 from "assets/images/invest12.png";
import invest13 from "assets/images/invest13.png";
import { callApi } from "app/utils";
import shibaiPng from "assets/images/shibai.png";
import Paging from 'components/Paging'
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      list: {},
      reqParams: {
        loanId: this.props.props.params.id,
        page: 1,
        pageSize: 20
      },
      info: {},
      flag:true,
    };
  }

  componentDidMount() {
   
    this.requestList(this.state.reqParams)
  }
  requestList(param){
      callApi("/loan/investrecord", param, "POST").then(data => {
            console.log(data);
            this.setState({
              list: data.data.list,
              info: data.data
            });
          });
  }
  //分页方法
 
    handlePageFocus(e){
        this.setState({
          flag:false
        })
    }
  
    handlePage(e){
      if(e.target.value>this.state.info.pageCount){
        Toast.info('没有那么多页面',1)
      }else{
        this.state.myinvestsParams.page = e.target.value
        this.forceUpdate()
        this.requestList(this.state.reqParams)
      }
      
      this.setState({
        flag:true
      })
  
    }
  
   
    pageBtn(opt){
      if(opt=='next'){
        if(this.state.info.pageCount<=this.state.reqParams.page){
          Toast.info('没有下一页了',1)
          return false
        }else{
          let temp = ++(this.state.reqParams.page)
         this.state.reqParams.page = temp
        }
        
      }else if(opt=='prev'){
        if(this.state.reqParams.page<=1){
          Toast.info('没有上一页了',1)
          return false
        }else{
          let temp = --(this.state.reqParams.page)
          this.state.reqParams.page =temp
        }
       
      }else if(opt=='first'){
        this.state.reqParams.page = 1
      }else if(opt=='last'){
        this.state.reqParams.page = this.state.info.pageCount
      }
  
      
      this.requestList(this.state.reqParams)
  
    }
  
    //分页方法

  render() {
    let { list ,info} = this.state;
    return (
      <div className={`${s.tabFourBox}`}>
        {JSON.stringify(list) != "{}" &&JSON.stringify(list) != undefined ? (
          <div className={`${s.noticeBox}`}>
            <Flex>
              <Flex.Item>
                <Flex
                  className={`${s.noticeBoxItem}`}
                  justify="center"
                  direction="column"
                >
                  <img src={invest11} />
                  <span>一马当先奖</span>
                  <span className="color1">{list[0].investorNickname}</span>
                </Flex>
              </Flex.Item>
              <Flex.Item>
                <Flex
                  className={`${s.noticeBoxItem}`}
                  justify="center"
                  direction="column"
                >
                  <img src={invest12} />
                  <span>一马当先奖</span>
                  <span className="color1">{list[0].investorNickname}</span>
                </Flex>
              </Flex.Item>
              <Flex.Item>
                <Flex
                  className={`${s.noticeBoxItem}`}
                  justify="center"
                  direction="column"
                >
                  <img src={invest13} />
                  <span>一马当先奖</span>
                  <span className="color1">{list[0].investAmount}</span>
                </Flex>
              </Flex.Item>
            </Flex>
            {JSON.stringify(list) != "{}" &&JSON.stringify(list) != undefined ? (
             
                <div className={`${s.listBox}`}>
                  <Flex className={`${s.item}`}>
                    <Flex.Item className={`flex1`}>投资用户</Flex.Item>
                    <Flex.Item className={`flex1`}>投资金额</Flex.Item>
                    <Flex.Item className={`flex2`}>投资时间</Flex.Item>
                  </Flex>
                  {list.map((item, index) => {
                    return (
                      <Flex key={index} className={`${s.item}`}>
                        <Flex.Item className={`flex1`}>{item.investorNickname}</Flex.Item>
                        <Flex.Item className={`flex1`}>{item.investAmount}</Flex.Item>
                        <Flex.Item className={`flex2`}>{item.investTime}</Flex.Item>
                      </Flex>
                    );
                  })}
                  <Paging
                        handlePage={this.handlePage.bind(this)} 
                        myinvestsParams={this.state.myinvestsParams} 
                        info={info}
                        pageBtn={this.pageBtn.bind(this)}
                        flag={this.state.flag}
                        handlePageFocus={this.handlePageFocus.bind(this)}
                  />
                </div>

             
            ) : (
              <Flex className={`nullBox`} direction="column">
                <Flex.Item className={`nullItem flex8`}>
                  <img src={shibaiPng} />
                </Flex.Item>
                <Flex.Item className={`nullItem flex1`}>暂无投资记录</Flex.Item>
                <Flex.Item className={`nullItem flex1`}>
                  <div
                    className={`btn`}
                    onClick={() => {
                      hashHistory.push("/projectList");
                    }}
                  >
                    去投资
                  </div>
                </Flex.Item>
              </Flex>
            )}
          </div>
        ) : null}
      </div>
    );
  }
}
